<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Editor</title>
  <style type="text/css" media="screen">

    .ace_editor, .toolbar {
      border: 1px solid lightgray;
      margin: auto;
      width: 80%;
    }
    .ace_editor {
      height: 200px;
    }
  </style>
  <script src="../../static/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>

  <!-- load ace -->
  <script src="../src/ace.js"></script>
  <!-- load ace language_tools extension -->
  <script src="../src/ext-language_tools.js"></script>
  <script>
    var buildDom = require("ace/lib/dom").buildDom;
    var editor = ace.edit();
    editor.setOptions({
      theme: "ace/theme/tomorrow_night_eighties",
      mode: "ace/mode/markdown",
      maxLines: 30,
      minLines: 30,
      autoScrollEditorIntoView: true,
    });
    var refs = {};
    function updateToolbar() {
      refs.saveButton.disabled = editor.session.getUndoManager().isClean();
      refs.undoButton.disabled = !editor.session.getUndoManager().hasUndo();
      refs.redoButton.disabled = !editor.session.getUndoManager().hasRedo();
    }
    editor.on("input", updateToolbar);
    editor.session.setValue(localStorage.savedValue || "Welcome to ace Toolbar demo!")
    function save() {
        var content = editor.getValue();
      localStorage.savedValue = content;
      editor.session.getUndoManager().markClean();
      updateToolbar();
      console.log(typeof content);
      var form = new FormData;
      form.append("content",content);
      form.append("type","java");
      $.ajax({
            url: "/judgeByString",
            type: "POST",
            data: form,
            cache: false,
            async: false,
            processData : false,
            contentType : false,
            success: function (data) {
                data = JSON.parse(data);
                document.getElementById("result").innerHTML=data.data;
            },
            error: function () {
                console.log("失败");
            }
      });
    }
    editor.commands.addCommand({
      name: "save",
      exec: save,
      bindKey: { win: "ctrl-s", mac: "cmd-s" }
    });

    buildDom(["div", { class: "toolbar" },
      ["button", {
        ref: "saveButton",
        onclick: save
      }, "save"],
      ["button", {
        ref: "undoButton",
        onclick: function() {
          editor.undo();
        }
      }, "undo"],
      ["button", {
        ref: "redoButton",
        onclick: function() {
          editor.redo();
        }
      }, "redo"],
      ["button", {
        style: "font-weight: bold",
        onclick: function() {
          editor.insertSnippet("**${1:$SELECTION}**");
          editor.renderer.scrollCursorIntoView()
        }
      }, "bold"],
      ["button", {
        style: "font-style: italic",
        onclick: function() {
          editor.insertSnippet("*${1:$SELECTION}*");
          editor.renderer.scrollCursorIntoView()
        }
      }, "Italic"],
    ], document.body, refs);
    document.body.appendChild(editor.container)

    window.editor = editor;
  </script>
  <div id="result">

  </div>
</body>
</html>
